<script setup lang="ts">
defineOptions({
  name: "deleteConfirm"
});
import { computed } from "vue";
import { WarningFilled } from "@px-ui/icons-vue";

interface Props {
  title: string;
  tips: string;
}

const props = withDefaults(defineProps<Props>(), { tips: "删除后不可恢复，请谨慎操作！" });
const dialogVisible = defineModel({ type: Boolean, default: false });
const realTitle = computed(() => `确定要删除 ${props.title} 吗？`);
const emits = defineEmits(["confirm"]);

const cancelHandler = () => {
  dialogVisible.value = false;
};

const confirmHandler = () => {
  emits("confirm");
  dialogVisible.value = false;
};
</script>

<template>
  <px-dialog v-model="dialogVisible" width="400">
    <template #header>
      <div class="my-header">
        <px-icon><WarningFilled /></px-icon>
        <div class="title-text">
          {{ realTitle }}
        </div>
      </div>
    </template>
    <span class="content">{{ tips }}</span>
    <template #footer>
      <span class="dialog-footer">
        <px-button type="info" @click="cancelHandler">取消</px-button>
        <px-button type="danger" @click="confirmHandler"> 删除 </px-button>
      </span>
    </template>
  </px-dialog>
</template>

<style lang="scss" scoped>
.my-header {
  display: flex;
  gap: 6px;
  align-items: center;

  .px-icon {
    font-size: 22px;
    color: #f59e0b;
  }

  .title-text {
    display: -webkit-box;
    flex: 1;
    width: 0;
    overflow: hidden;
    font-weight: 600;
    color: #333;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.content {
  color: #333;
}
</style>
